.box {

    :global {

        .table {
            width: 100%;
            border: 1px solid rgb(244, 244, 244);

            .table-head {
                width: 100%;
                background-color: rgb(244, 244, 244);

                display: flex;

                .col {
                    flex: 1;
                    border: 1px solid white;
                    padding: 10px 20px;
                    text-align: center;

                }
            }

            .table-body {
                width: 100%;
                background-color: rgb(250, 250, 250);
                .row {
                    display: flex;

                    .col {
                        display: inline-block;
                        flex: 1;
                        border: 1px solid white;
                        padding: 10px 20px;
                        text-align: center;

                    }
                }

            }
        }

        .editable-cell {
            position: relative;
        }

        .editable-cell-value-wrap {
            padding: 5px 12px;
            cursor: pointer;
        }

        .editable-row:hover .editable-cell-value-wrap {
            padding: 4px 11px;
            border: 1px solid #d9d9d9;
            border-radius: 2px;
            height: 33px;
        }

        [data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
            border: 1px solid #434343;
        }
    }
}